<template>
	<view>
		<van-tabs @change="changeTab" color="#1152FC" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #1152FC' : ''" :title="`申请记录(${applyLength})`">
				<record-item v-if="applyList.length" :recordList="applyList"></record-item>
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="applyList.length >= 10" :status="status" />
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #1152FC' : ''" :title="`采购记录(${purchaseLength})`">
				<record-item v-if="purchaseList.length" :recordList="purchaseList"></record-item>
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="purchaseList.length >= 10" :status="status1" />
			</van-tab>
			<van-tab :title-style="active == 2 ? 'color: #1152FC' : ''" :title="`退库记录(${emergeLength})`">
				<record-item v-if="emergeList.length" :recordList="emergeList"></record-item>
				<view v-else>
					<van-empty description="暂无记录" />
				</view>
				<uni-load-more v-if="emergeList.length >= 10" :status="status2" />
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import RecordItem from '../components/recordItem.vue'
	export default {
		components: {
			RecordItem
		},
		data() {
			return {
				status: 'more',
				status1: 'more',
				status2: 'more',
				haveMoreApply: true,
				haveMorePurchase: true,
				haveMoreEmerge: true,
				active: 0,
				params: {
					申请类型: 3,
					申请人员id: uni.getStorageSync('userInfo').id,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params1: {
					申请类型: 1,
					申请人员id: uni.getStorageSync('userInfo').id,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params2: {
					申请类型: 2,
					申请人员id: uni.getStorageSync('userInfo').id,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				applyList: [],
				purchaseList: [],
				emergeList: [],
				recordList: [{
					id: 1,
					申请人: '123',
					申请单位: '奥声物业',
					申请仓库: '太平仓库',
					备注: '需要使用'
				},{
					id: 2,
					申请单位: '奥声物业',
					申请人: '123',
					申请仓库: '太平仓库',
					备注: '需要使用'
				}]
			}
		},
		onLoad() {
			this.getApplyRecord()
			this.getPurchaseRecord()
			this.getEmergeRecord()
		},
		onReachBottom() {
			if (this.active === 0 && this.haveMoreApply) {
				this.status = 'loading'
				this.getMoreApply()
			} else if (this.active === 1 && this.haveMorePurchase) {
				this.status1 = 'loading'
				this.getMorePurchase()
			} else if(this.active === 2 && this.haveMoreEmerge) {
				this.status2 = 'loading'
				this.getMoreEmerge()
			}
		},
		computed: {
			applyLength() {
				return this.applyList.length
			},
			purchaseLength() {
				return this.purchaseList.length
			},
			emergeLength() {
				return this.emergeList.length
			}
		},
		methods: {
			changeTab(name, title) {
				this.active = name.target.index
			},
			getApplyRecord() {
				uni.showLoading()
				this.$http.post('/property/apply/list', this.params).then(res => {
					if(res.code === 10000) {
						// console.log('list', res.data.list)
						this.applyList = res.data.list || []
					}
				})
			},
			getPurchaseRecord() {
				this.$http.post('/property/apply/list', this.params1).then(res => {
					if(res.code === 10000) {
						this.purchaseList = res.data.list || []
					}
				})
			},
			getEmergeRecord() {
				this.$http.post('/property/apply/list', this.params2).then(res => {
					if(res.code === 10000) {
						this.emergeList = res.data.list || []
					}
				})
			},
			getMoreApply() {
				this.params.pagination.current++
				this.$http.post('/property/apply/list', this.params).then(res => {
					if(res.code === 10000) {
						if (res.data.list == null) {
							this.haveMoreApply = false
							this.status = 'noMore'
							return
						}
						this.applyList = this.applyList.concat(res.data.list)
					}
				})
			},
			getMorePurchase() {
				this.params1.pagination.current++
				this.$http.post('/property/apply/list', this.params).then(res => {
					if(res.code === 10000) {
						if (res.data.list == null) {
							this.haveMorePurchase = false
							this.status1 = 'noMore'
							return
						}
						this.purchaseList = this.purchaseList.concat(res.data.list)
					}
				})
			},
			getMoreEmerge() {
				this.params2.pagination.current++
				this.$http.post('/property/apply/list', this.params).then(res => {
					if(res.code === 10000) {
						if (res.data.list == null) {
							this.haveMoreEmerge = false
							this.status2 = 'noMore'
							return
						}
						this.emergeList = this.emergeList.concat(res.data.list)
					}
				})
			}
		}
	}
</script>

<style>

</style>
